<template>
	<view class="container">
		<navigation-custom :config="config" :scrollTop="scrollTop" @customConduct="customConduct" :scrollMaxHeight="scrollMaxHeight" />
		<view class="header">
			<view>
				<text></text>
				<text>订单信息({{ statusDesc }})</text>
			</view>
			<view>订单编号：{{ order.orderNo }}</view>
			<view>下单时间：{{ order.createTime }}</view>
			<view v-if="order.orderType == 1">自提时间：{{ order.pickTime }}</view>
			<view v-if="order.orderType == 2">预计送达时间：{{ order.deliveryTime }}</view>
		</view>

		<!-- <view class="order-shop"></view> -->
		<!-- <view class="order-address"></view> -->
		<view class="order-shop">
			<text class="iconfont icon-dianhua pos-icon" @tap="callPhone"></text>
			<view class="shop-info">
				<text class="shop-name">{{ shop.name }}</text>
				<text class="shop-address">{{ shop.address }}</text>
			</view>
			<view class="shop-distance">
				<text>{{ shop.distance }}</text>
			</view>
		</view>
		<!-- 配送到家 -->
		<view class="order-address" v-if="order.orderType == 2">
			<text class="iconfont icon-mendian pos-icon"></text>
			<view class="address-info">
				<text class="address">{{ address.address }}</text>
				<view class="info">
					<text class="name">{{ address.name }} {{ address.phone }}</text>
				</view>
			</view>
		</view>

		<view class="content">
			<view class="order-desc">
				<text>商品信息</text>
				<text class="order-type">{{ typeDesc }}</text>
			</view>

			<view class="order-goods-list">
				<view class="order-goods" v-for="(orderGoods, index) in order.orderGoodsList">
					<image class="goods-image" :src="orderGoods.thumbnail" />
					<view class="goods-info">
						<text class="goods-name">{{ orderGoods.goodsName }}</text>
						<text class="goods-spec">{{ orderGoods.goodsSpec }}</text>
					</view>
					<view class="purchase">
						<view class="goods-price">¥ {{ orderGoods.goodsPrice.toFixed(2) }}</view>
						<view class="purchase-num">x {{ orderGoods.goodsNum }}</view>
					</view>
				</view>
			</view>

			<view class="price-desc-list">
				<view class="price-desc" v-for="(priceDesc, index) in priceDescList" :key="index">
					<text class="desc">{{ priceDesc.text }}</text>
					<text :class="priceDesc.style">{{ priceDesc.price }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getShop } from '@/api/shop.js';
import { getOrder } from '@/api/order.js';
import { getAddress } from '@/api/user.js';
import orderUtil from '@/utils/order.js';
import locationUtil from '@/utils/location.js';
export default {
	onLoad(params) {
		this.getOrderDetail(params.orderId);
	},
	data() {
		return {
			config: {
				title: '订单详情'
			},
			order: [],
			statusDesc: '',
			typeDesc: '',
			priceDescList: [
				{
					text: '总价',
					price: ''
				},
				{
					text: '运费',
					price: ''
				},
				{
					text: '活动优惠',
					price: ''
				},
				{
					text: '实付款',
					price: '',
					style: 'pay-price'
				}
			],
			shop: {},
			address: {}
		};
	},
	methods: {
		callPhone() {
			uni.showModal({
				content: '是否拨打门店客服电话',
				success: (res) => {
					if (res.confirm) {
						uni.makePhoneCall({
							phoneNumber: this.shop.phone
						});
					} else if (res.cancel) {
					}
				}
			});
		},
		getOrderDetail(orderId) {
			getOrder(orderId)
				.then((res) => {
					console.log(res.data);
					this.order = res.data;
					this.statusDesc = orderUtil.convertSysOrderStatus(this.order.orderStatus);
					this.typeDesc = orderUtil.convertOrderType(this.order.orderType);

					this.priceDescList[0].price = '¥ ' + this.order.totalPrice.toFixed(2);
					this.priceDescList[1].price = '¥ ' + this.order.deliveryPrice.toFixed(2);
					this.priceDescList[2].price = '- ¥ ' + this.order.activityPrice.toFixed(2);
					this.priceDescList[3].price = '¥ ' + this.order.payPrice.toFixed(2);
					let info = {
						shopId: this.order.shopId,
						addressId: -1
					};
					if (this.order.orderType == 2) {
						info.addressId = this.order.addressId;
					}
					return Promise.resolve(info);
				})
				.then((info) => {
					let shopId = info.shopId;
					getShop(shopId).then((res) => {
						this.shop = res.data;
						locationUtil.getLocation().then((coordinate) => {
							const lon1 = coordinate.longitude;
							const lat1 = coordinate.latitude;
							const lon2 = this.shop.longitude;
							const lat2 = this.shop.latitude;
							// 对对象的属性变化，需要使用this.$set手动响应式变化
							this.$set(this.shop, 'distance', '距您' + locationUtil.getDistanceFromLatLonInKm(lon1, lat1, lon2, lat2) + 'km');
						});
					});
					if (info.addressId !== -1) {
						getAddress(info.addressId).then((res) => {
							this.address = res.data;
						});
					}
				});
		}
	}
};
</script>

<style scoped lang="less">
@theme-color: #ff5a14;

.header,
.order-shop,
.order-address,
.content {
	background-color: #fff;
}

.header {
	display: flex;
	flex-direction: column;
	gap: 15rpx;
	padding: 25rpx 20rpx 15rpx 20rpx;
	font-size: 28rpx;
	color: #666666;
}

.order-shop,
.order-address {
	display: flex;
	flex-direction: row;
	margin: 15rpx 0;
	padding: 30rpx;

	.pos-icon {
		height: 50rpx;
		padding: 25rpx;
		background-color: @theme-color;
		border-radius: 50rpx;
		color: #fff;
		font-size: 50rpx;
	}

	.shop-info,
	.address-info {
		display: flex;
		flex-direction: column;
		flex: 1;
		margin-left: 20rpx;
		gap: 20rpx;

		.shop-name,
		.address {
			font-size: 32rpx;
			font-weight: bold;
		}

		.shop-address,
		.info {
			font-size: 28rpx;
			display: flex;
			align-items: center;
		}
	}
	.shop-distance {
		display: flex;
		align-items: center;
		font-size: 26rpx;
		color: #666666;
	}
	.address-info {
		flex: 1;
	}
}

.content {
	padding: 30rpx;
	.order-desc {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		font-size: 28rpx;
		color: #666666;
		.order-type {
			color: @theme-color;
		}
	}
	.order-goods-list {
		.order-goods {
			display: flex;
			flex-direction: row;
			padding: 20rpx 0;
		}

		.order-goods .goods-image {
			width: 120rpx;
			height: 120rpx;
		}

		.goods-info {
			flex: 3;
			display: flex;
			flex-direction: column;
			margin-left: 30rpx;
			gap: 10rpx;
			font-size: 30rpx;

			.goods-spec {
				color: #a69999;
				font-size: 28rpx;
			}
		}

		.purchase {
			flex: 1;
			text-align: right;
		}
	}

	.price-desc-list {
		display: flex;
		flex-direction: column;
		gap: 15rpx;
		padding: 15rpx 0;
		.price-desc {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			font-size: 30rpx;
			.desc {
				color: #333333;
			}

			.pay-price {
				font-weight: bold;
				color: @theme-color;
			}
		}
	}
}
</style>
